<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <el-form ref="form" :model="newUser" label-width="80px">
      <el-form-item label="姓名">
        <el-input v-model="newUser.name" placeholder="请输入名字" />
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="newUser.position" placeholder="请输入职位" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addUser">立即创建</el-button>
      </el-form-item>
    </el-form>
    <ul>
       <li v-for="user in users" >
           <h2 @click="user.show = !user.show">{{user.name}}</h2>
           <h3 v-show="user.show">{{user.position}}</h3>
           <h3>{{user.email}}</h3>
           <el-button type="danger" icon="el-icon-delete" circle @click="deleteUser(user)"></el-button>
       </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg:"简单的用户管理",
      newUser:{},
      users:[
            { name:'Henry', position:'前端工程师', show:false },
            { name:'Ken', position:'算法工程师', show:false },
            { name:'John', position:'美工', show:false },
            { name:'Bob', position:'产品设计', show:false }
        ]
    }
  },
  methods:{
    addUser:function(){
      this.users.push({
        name:this.newUser.name,
        position:this.newUser.position,
        show:false
      })
    },
    deleteUser:function(user){
      console.log(user.name)
      this.users.splice(this.users.indexOf(user),1)
    }
  },
  created(){
    // this.$http.get("https://jsonplaceholder.typicode.com/users")
		// 		.then(function(response){
		// 			this.users = response.data;
		// 		})
  }
}
</script>

<style scoped>

.hello {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}
ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
}
li {
    flex-grow: 1;
    flex-basis: 200px;
    text-align: center;
    padding: 30px;
    border: 1px solid #222;
    margin: 10px;
}

</style>
